<template>
  <div class="register">
    <div class="item-content">
      <img src="/images/bg.jpg" style="width: 100%;">
    </div>
    <div class="item-input">
      <van-field clearable label="手机号码" placeholder="请输入您的手机号码" required v-model="mobile"/>
      <van-field center clearable label="短信验证码" placeholder="输入手机验证码" required v-model="smsCode">
        <van-button
          :disabled="!btnStatus"
          @click="btnStatus&&sendSmsCode('reg');"
          size="small"
          slot="button"
          type="primary"
        >{{smsText}}</van-button>
      </van-field>
      <van-field
        :disabled="disableValue"
        clearable
        label="推荐人手机"
        placeholder="非必填"
        v-model="recommendMobile"
      />
      <br>
      <van-button @click="register" class="save-button main-theme-color" size="large">提交</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters, mapMutations } from 'vuex'
import { Toast } from 'vant'
import Cookies from 'js-cookie'
import { getUrlHash } from '@/utils/tools'
Vue.use(Toast)
export default {
  name: 'Register',
  data() {
    return {
      mobile: '',
      smsCode: '',
      recommendMobile: '',
      smsText: '获取验证码',
      token: '',
      time: 300,
      btnStatus: true,
      userId: ''
    }
  },

  mounted() {
    this.token = Cookies.get('token')
    if (Cookies.get('share_mobile')) {
      this.recommendMobile = Cookies.get('share_mobile') || ''
      Cookies.remove('share_mobile')
    }
    if (!this.userInfo.mobile) {
      Toast('绑定手机号码可获取更多权益哦')
    } else {
      this.$router.push('/account')
    }

    // this.$api.personInf
    //   .inviterphone({ openId: this.token })
    //   .then(res => {
    //     console.log(res)
    //     if (res.code == 0) {
    //       this.userId = res.data.userId
    //       this.recommendMobile = res.data.mobile
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })
  },
  computed: {
    ...mapGetters(['userInfo', 'toUrl', 'blackRouters']),
    disableValue() {
      let flag = false
      if (this.recommendMobile && this.recommendMobile.indexOf('*') != -1) {
        flag = true
      }
      return flag
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    sendSmsCode(smstype) {
      var phone_pattern = /^0?(1[0-9])[0-9]{9}$/
      if (
        this.mobile == null ||
        !phone_pattern.test(this.mobile) ||
        this.mobile == ''
      ) {
        Toast('请输入正确的手机号码，例如：13500000000')
        return
      }
      this.$api.personInf
        .sendSms({ openid: this.token, mobile: this.mobile, smstype: smstype })
        .then(res => {
          if (res.code == 0) {
            var data = res.data
            var flag = data.flag
            var msg = data.msg
            this.time = data.seconds
            if (flag) {
              Toast(msg)
              this.fun_timedownn()
            } else {
              this.smsText = '重新获取'
              Toast(msg)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    fun_timedownn() {
      let timer = window.setInterval(() => {
        this.time--
        if (this.time < 0) {
          window.clearInterval(timer)
          this.smsText = '重新获取'
          this.btnStatus = true
        } else {
          this.smsText = this.time + '秒'
          this.btnStatus = false
        }
      }, 1000)
    },
    register() {
      let phone_pattern = /^0?(1[0-9])[0-9]{9}$/
      if (
        this.mobile == null ||
        !phone_pattern.test(this.mobile) ||
        this.mobile == ''
      ) {
        Toast('请输入正确的手机号码，例如：13500000000')
        return
      }
      if (this.smsCode == null || this.smsCode == '') {
        Toast('请输入手机验证码')
        return
      }
      console.log(this.userId)
      if (this.userId == null || this.userId == '') {
        if (
          this.recommendMobile != null &&
          !phone_pattern.test(this.recommendMobile) &&
          this.recommendMobile != ''
        ) {
          Toast('请输入正确的推荐人手机号码，例如：13500000000')
          return
        }
      }

      this.$api.personInf
        .personRegister({
          openid: this.token,
          mobile: this.mobile,
          smsCode: this.smsCode,
          recommendMobile: this.recommendMobile || '',
          userId: this.userId || ''
        })
        .then(res => {
          if (res.code == 0) {
            Toast.success('注册成功！')
            console.log('注册', res.data.userInfo)
            this.setUserInfo(res.data.userInfo)
            setTimeout(() => {
              if (this.toUrl) {
                this.goToView(this.toUrl)
              } else {
                this.goToView('/account')
              }
            }, 2000)
          } else {
            Toast(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    goToView(path) {
      this.$router.push(path)
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //   })
  // }
}
</script>

<style lang="less">
@import '../../assets/less/base';
.main-theme-color {
  background-color: @main-theme-color;
}
.item-content {
}

.item-input {
  margin: 0.75rem;
}

.save-button {
  line-height: 2.4rem;
  color: #fff;
  font-size: 0.85rem;
  height: 2.4rem;
  border: none;
  text-decoration: none;
  text-align: center;
  display: block;
  border-radius: 0.25rem;
  box-sizing: border-box;
  -webkit-appearance: none;
  padding: 0 0.5rem;
  margin: 0;
  white-space: nowrap;
  position: relative;
  text-overflow: ellipsis;
  font-family: inherit;
  cursor: pointer;
}
</style>
